<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详情页</title>
    <link rel="stylesheet" href="./font_888v4gjdis/iconfont.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/detail.css">
</head>

<body>
    <!-- 顶栏 -->
    <div class="ding">
        <div class="ding-c">
            <!-- 左侧浮动 -->
            <div class="ding-left1 fl">
                <span class="iconfont icon-dingwei"></span>
            </div>
            <span class="ding-left2 fl">北京</span>
            <!-- 右侧浮动 -->
            <div class="ding-right fr">
                <span class="logininfo">
                    <a href="./login.html" class="logininfo1">你好，请登录</a>
                    <a href="./register.html" class="logininfo2">免费注册</a>
                </span>
                <span> | </span>
                <a href="#">我的订单</a>
                <span> | </span>
                <a href="#">我的京东</a>
                <span> | </span>
                <a href="#">京东会员</a>
                <span> | </span>
                <a href="#">企业采购</a>
                <span> | </span>
                <a href="#">客户服务</a>
                <span> | </span>
                <a href="#">网站导航</a>
                <span> | </span>
                <a href="./iden.html">个人中心</a>
            </div>

        </div>
    </div>


    <!-- 头部 -->
    <div class="header">
        <div class="header-c">
            <!-- 左：logo -->
            <div class="header-logo fl">
                <img src="./image/jd-logo.png" alt="">
            </div>
            <!-- 中间：搜索框 -->
            <div class="header-s fl">

                <div class="header-search">
                    <input type="text" class="fl" value="小米手机">
                    <span class="iconfont icon-camera fl"></span>
                    <div class="fl">
                        <span class="iconfont icon-sousuo"></span>
                    </div>
                </div>

                <div class="header-btn">
                    <a href="#">24期免息券</a>
                    <a href="#">赢京豆</a>
                    <a href="#">洗烘套装</a>
                    <a href="#">金秋上新</a>
                    <a href="#">vivo S10</a>
                    <a href="#">石榴来了</a>
                    <a href="#">绿植9.9</a>
                    <a href="#">二手平板</a>
                    <a href="#">自营电脑</a>
                </div>
            </div>
            <!-- 右边：购物车 -->
            <div class="header-erweima fr">
                <img src="./image/erweima.png" alt="">
            </div>
            <div class="header-right fr">
                <span class="iconfont icon-gouwuche"></span>
                <a href="./cart.html">我的购物车</a>
            </div>
        </div>
    </div>



    <!-- 路径导航 -->
    <div class="daohang">
        <div class="daohang-c">
            <a href="./index.html">首页</a>
            <span> > </span>
            <a href="#">电脑、办公</a>
            <span> > </span>
            <a href="#">详情页</a>
        </div>
    </div>




    <!-- 放大镜和详情 -->
    <div class="xq">
        <div class="xq-c">

            <!-- 放大镜 -->
            <!-- <div class="enlarge fl">

                <div class="box">
                    <img src="./image/1.jpg" alt="">
                    <div class="mask"></div>
                    <div class="big">
                        <img src="./image/1.jpg" alt="">
                    </div>
                </div>

                <div class="small">
                    <img class="active" src="./image/1.jpg" alt="">
                    <img src="./image/2.jpg" alt="">
                    <img src="./image/3.jpg" alt="">
                </div>
                
            </div> -->
            <div class="enlarge fl">

                <div class="box">
                    <img src="" alt="">
                    <div class="mask"></div>
                    <div class="big">
                        <img src="" alt="">
                    </div>
                </div>

                <div class="small">
                    <img class="active" src="" alt="">
                    <img src="" alt="">
                </div>
                
            </div>

            <!-- 详情 -->
            <div class="goodsinfo fl">
                <!-- <h1>商品信息</h1> -->
                <div class="goodsname">
                    <span>xxxxx</span>
                </div>
                <div class="goodsintroduce">
                    商品简介：<span>xxxxx</span>
                </div>
                <div class="goodsprice">
                    京东价<span>xxxxx</span>
                </div>
                <div class="goodssupport">
                    <span>商品支持：&nbsp;&nbsp;</span>
                    <span class="iconfont icon-duigou"></span>
                    <span>白条分期</span>
                    <span class="iconfont icon-duigou"></span>
                    <span>以旧换新</span>
                    <span class="iconfont icon-duigou"></span>
                    <span>积分抵现</span>
                </div>
                <div>
                    <button class="custom-btn btn-4">立即购买</button>
                    <button class="custom-btn btn-7 addcart">加入购物车</button>
                </div>
            </div>

        </div>
    </div>















    <script src="./node_modules/jquery/dist/jquery.js"></script>
    <script src="./js/tools-danli.js"></script>
    <!-- 用户注册登录js -->
    <script src="./js/username.js"></script>
    <!-- 放大镜js -->
    <script src="./js/enlarge.js"></script>
    <!-- 引入layer -->
    <script src="./node_modules/layui-layer/dist/layer.js"></script>
    <!-- 商品详情js -->
    <script src="./js/detail.js"></script>
</body>

</html>